<template>
  <div class="container">
    <div class="input">
      <input type="text" placeholder="请输入城市名称" v-model.trim="cityName" />
      <div class="link" @click="handleSearch" v-if="findedCity">{{ findedCity }}</div>
    </div>
    <div class="search-result">
      <div class="item" v-for="city in cities" :key="city.adcode">
        <!-- 此处列表渲染 -->
        <div class="box">
          <div class="left">
            <h3>{{ city.name }}</h3>
            <span>{{ city.temperature }}℃</span>
          </div>
          <div class="right">
            <button @click="handleCheck(city.adcode)">查看</button>
            <button @click="handleDelete(city.adcode)">删除</button>
          </div>
        </div>
      </div>
    </div>
    <BottomChartTemp></BottomChartTemp>
  </div>
</template>

<script setup>
import BottomChartTemp from '@/components/BottomChartTemp.vue'
import { ref, onMounted, watch } from 'vue'
import { debounce } from 'lodash'
import { getCode } from '@/api/index.js'
import { useRouter } from 'vue-router'

const router = useRouter()

const cityName = ref('')
const findedCity = ref(null)

// 查找城市
const findCity = async () => {
  const { geocodes } = await getCode(cityName.value)
  if (geocodes) {
    findedCity.value = geocodes[0].city
  } else if (cityName.value === '') {
    findedCity.value = ''
  } else {
    findedCity.value = '似乎没有找到你查找的城市'
    cityName.value = ''
  }
}
// 侦听输入框内容变化,变化时触发查找城市
watch(
  cityName,
  debounce((newCity) => {
    findedCity.value = ''
    findCity(newCity)
  }, 500)
)
// 使用路由跳转页面
const handleSearch = async (event) => {
  const { geocodes } = await getCode(cityName.value)
  router.push({
    name: 'search',
    params: { adcode: geocodes[0].adcode },
    query: { way: 'search' },
  })
}

// 取出本地存储的城市信息,遍历渲染
const cities = ref([])
const getLocalstorageCity = () => {
  cities.value = JSON.parse(localStorage.getItem('cityList')) || []
}

// 点击查看按钮,跳转到详情页面
const handleCheck = (adcode) => {
  router.push({
    name: 'search',
    params: { adcode: adcode },
    query: { way: 'check' },
  })
}

// 点击删除按钮,删除本地存储的城市信息
const handleDelete = (adcode) => {
  const cityList = JSON.parse(localStorage.getItem('cityList')) || []
  const updatedList = cityList.filter((city) => city.adcode !== adcode)
  localStorage.setItem('cityList', JSON.stringify(updatedList))
  cities.value = updatedList
}

onMounted(() => {
  getLocalstorageCity()
})
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .input {
    width: 100%;
    .link {
      width: 100%;
      height: 50px;
      line-height: 50px;
      background: #004e71;
      margin: 5px 0;
      padding-left: 5px;
      cursor: pointer;
    }
    input {
      width: 100%;
      height: 40px;
      border: none;
      padding: 5px;
      border-bottom: 1px solid #ccc;
      background: transparent;
      color: #fff;
      font-size: 16px;
      outline: none;

      &::placeholder {
        color: #9c9da2;
      }
      &:focus {
        border-bottom: none;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
      }
      &:hover {
        border-bottom: none;
        box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.6);
      }
    }
  }
  .search-result {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-height: 170px;
    overflow-y: auto;
    .item {
      .box {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        &:hover {
          .left {
            flex: 0.9;
          }
          .right {
            display: flex;
          }
        }
        .left {
          flex: 1;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 45px;
          padding: 10px;
          background: #004e71;
          color: #fff;
          transition: flex 0.4s ease-in-out;
          cursor: pointer;
          h3,
          span {
            background: #004e71;
          }
        }
        .right {
          display: none;
          button {
            width: 80px;
            height: 45px;
            background: #eab308;
            border: none;
            color: #fff;
            font-size: 16px;
            text-align: center;
            margin-left: 10px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
